<script lang="ts" setup>
const props = defineProps<{
  list?: any[]
  type?: string
}>()
const emit = defineEmits<{
  (e: 'clickItem', item: any): void
}>()
const mockData = [
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png',
    viewNum:12
  },
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png'
  },
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png'
  },
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png'
  },
  {
    title: '全省职业健康知识有奖竞答活动火热进行中',
    blurd: '动动手指，活动期间学习职业健康知识每天都有奖品拿，怎么样是不是很心动，赶快看下面的规则吧；活动时间：2022年8月17日-21日；参与流程：活动入口方式一，长按识别活动二维码活...',
    info: '陕西百姓健康',
    time: '2023-12-07',
    url: '/img/swiper.png'
  },

]
const list = computed(() => {
  if (props.list) {
    return props.list
  }
  else {
    return mockData
  }
})

function handleClickItem(item: any) {
  emit('clickItem', item)
}
</script>

<template>
  <div class="w-full gap-y-30px pr-30px">
    <div v-for="item in list" :key="item.id" class=" border-b-1 pt-5" @click="handleClickItem(item)" hover="text-#AC8358">
      <div class="cursor-pointer overflow-hidden  rounded-10 rounded-6px flex">
        <slot name="image" v-if="item.title || item.time || item.info">
          <el-image :src="item.url?.length ? item.url : '/img/placeholder.jpg'"
            class="inline-block h-80px w-full md:h-128px w-20%" />
        </slot>
        <div class="px-24px py-16px w-80%">
          <div class="truncate text-size-18px font-700 line-height-26px" :title="item.title">
            {{ item.title }}
          </div>
          <div class="mt-5px text-ellipsis text-#424242  line-clamp-2">
            {{ item.blurd }}
          </div>
        </div>
      </div>
      <div class="py-2 w-100% flex justify-between items-center" text="#333">
        <div class="w-35% flex justify-between">
          <span class="rounded-8 bg-#E7F0F5 px-2" text="#00AF84">
            {{ item.info }}
          </span>
          <span>
            发布时间：{{ item.time }}
          </span>
        </div>
        <div>
          <span>
            浏览量：{{ item.viewNum ? item.viewNum : item.page_view_num ? item.page_view_num : 0 }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .itemTitle{
//   &:hover{
//     color:#AC8358
//   }
// }
</style>
